import React, { Component } from "react";
import { Modal, Button, Form, InputNumber, DatePicker, Row, Col, Select, Input } from 'antd';
import GoBack from "@/components/TheGoBack";
import TheTable from "@/components/TheTable"
import TheButton from "@/components/TheButton";
import "../../list/style/style.less";
const { confirm } = Modal;
const { TextArea } = Input
export default class detials extends Component {
  constructor() {
    super()
    this.formRef = React.createRef()
    this.state = {
      columnsHouse: [
        {
          title: "房间名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "房间号码",
          dataIndex: "num",
          key: "num",
        },
        {
          title: "房间价格",
          dataIndex: "price",
          key: "price",
        },
        {
          title: "入住日期",
          dataIndex: "data",
          key: "data",
        },
        {
          title: "离店日期",
          dataIndex: "zdata",
          key: "zdata",
        },
        {
          title: "入住天数",
          dataIndex: "day",
          key: "day",
        },
      ],
      dataSourceHouse: [
        {
          name: 'sss',
          num: 11,
          price: 13,
        },
      ],
      rowData: null, // 房间信息数据
      columnsCost: [
        {
          title: "房间名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "房间号码",
          dataIndex: "num",
          key: "num",
        },
        {
          title: "房间价格",
          dataIndex: "price",
          key: "price",
        },
        {
          title: "入住日期",
          dataIndex: "data",
          key: "data",
        },
        {
          title: "离店日期",
          dataIndex: "zdata",
          key: "zdata",
        },
        {
          title: "入住天数",
          dataIndex: "day",
          key: "day",
        }
      ],
      dataSourceCost: [
        {
          name: 'sss',
          num: 11,
          price: 135,
        },
        {
          name: 'ss545yw2s',
          num: 11,
          price: 135,
        },
        {
          name: 'srwrqss',
          num: 131,
          price: 135,
        },
        {
          name: 'wwwwss',
          num: 141,
          price: 135,
        },
      ],
      // 宠物信息
      petData_1: [
        {
          title: "宠主姓名",
          value: '李同学',
        },
        {
          title: "手机号码",
          value: '14548451584',
        },
      ],
      petData_2: [
        {
          title: "宠物信息",
          value: '四月',
        },
        {
          title: "宠物品种",
          value: '美国短毛猫',
        },
        {
          title: "宠物生日",
          value: '2021-10-20',
        },
        {
          title: "宠物性别",
          value: '公',
        },
        {
          title: "绝育信息",
          value: '已绝育',
        },
        {
          title: "疫苗信息",
          value: '已打疫苗',
        },
      ],
      type: 10,
      status: 'Y',
      orderData: [], // 订单信息
      isModalVisible: false,
    }

  }
  componentDidMount() {
    // 订单信息
    const orderData = [
      {
        title: "第三方订单编号",
        value: 'JD134789098767893',
      },
      {
        title: "订单来源",
        value: "哈奇马APP预定"
      },
      {
        title: "入驻日期",
        value: '2022-10-13 16:08:56',
      },
      {
        title: "离开日期",
        value: '',
      },
    ]
    this.setState({
      orderData
    })
  }
  render() {
    const { dataSourceHouse, columnsHouse, dataSourceCost, columnsCost, orderData, rowData, petData_1, petData_2, isModalVisible } = this.state
    return (
      <>
        <div className="users-details">
          <GoBack history={this.props.history} title={'订单信息'} />
          <div className="order_info">
            <div className="order_content">
              {orderData.map((v, i) => {
                return (
                  <div key={i}>
                    <span>{v.title}:</span>
                    <span>{v.value}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <div className="users-details">
          <div className="order_info">
            <div className="order_content">
              {petData_1.map((v, i) => {
                return (
                  <div key={i}>
                    <span>{v.title}:</span>
                    <span>{v.value}</span>
                  </div>
                );
              })}
            </div>
            <div className="order_content">
              {petData_2.map((v, i) => {
                return (
                  <div key={i}>
                    <span>{v.title}:</span>
                    <span>{v.value}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <div className="users-details " style={{ marginTop: 20 }}>
          <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>房间信息</div>
          <TheTable
            style={{ marginBottom: 20 }}
            columns={columnsHouse}
            dataSource={dataSourceHouse}
          />
          <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>费用信息</div>
          <TheTable
            columns={columnsCost}
            dataSource={dataSourceCost}
          />
        </div>
      </>


    );
  }
}